<template>
	<!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> | -->
	<!-- query参数    params参数 -->
	<!-- 
	 get  明文，不安全，块，数据小于255字节
	 post 加密，安全，速度慢，数据大小没有限制
	 -->
	<!-- 	<router-link to="/index">OA入口</router-link>
  </nav>
  <router-view/> -->
	<el-container class="layout-container-demo">
		<el-aside width="200px">
			<el-scrollbar>
				<el-menu router :default-openeds="[]">
					<el-sub-menu index="1">
						<template #title>
							<el-icon>
								<User />
							</el-icon>人事管理
						</template>
						<el-menu-item-group>
							<el-menu-item index="/selfapply">
								岗位管理
							</el-menu-item>
							<el-menu-item index="/newstaffinto">
								员工入职
							</el-menu-item>
							<el-menu-item index="/peopleapplyapprival">
								员工列表
							</el-menu-item>
							<el-menu-item index="/peoplechangecreate">
								人事变动
							</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="2">
						<template #title>
							<el-icon>
								<Calendar />
							</el-icon>考勤管理
						</template>
						<el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="/attendcreat">
									考勤申请
								</el-menu-item>
							</el-menu-item-group>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="3">
						<template #title>
							<el-icon>
								<Document />
							</el-icon>合同管理
						</template>
						<el-menu-item-group>
							<el-menu-item index="/contractcreation">
								新建合同
							</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="4">
						<template #title>
							<el-icon>
								<Money />
							</el-icon>费用管理
						</template>
						<el-menu-item-group>
							<el-menu-item index="/feecreate">
								费用申请
							</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="5">
						<template #title>
							<el-icon>
								<Suitcase />
							</el-icon>项目管理
						</template>
						<el-menu-item-group>
							<el-menu-item index="/myProject">
								我的项目
							</el-menu-item>
							<el-menu-item index="/subProject">
								下级项目
							</el-menu-item>
							<el-menu-item index="/projectmanagement">
								权限变更
							</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="6">
						<template #title>
							<el-icon>
								<Reading />
							</el-icon>流程管理
						</template>
						<el-menu-item-group>
							<el-menu-item index="/stepmanage">
								流程管理首页
							</el-menu-item>
							<el-menu-item index="/mystep">
								我的流程
							</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
				</el-menu>
			</el-scrollbar>
		</el-aside>

		<el-container>
			<el-header style=" font-size: 12px">
				<el-row>
					<el-col :span="22">
						<el-button style="background-position: left;">
							<el-icon style="background-color: #FFFFFF ;border: none;">
								<House />
							</el-icon>
						</el-button>
					</el-col>
					<el-col :span="2">
						<div class="toolbar">
							<el-icon style="margin-right: 8px; margin-top: 1px">
								<Avatar />
							</el-icon>
							<el-dropdown><span>{{userName}}</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item>打卡</el-dropdown-item>
										<el-dropdown-item>个人信息</el-dropdown-item>
										<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</el-col>
				</el-row>
			</el-header>

			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
	export default {
		data() {
			return {
				userName:this.$store.state.user.userName,
			}
		},
		methods: {
			logout(){
				this.$store.commit('user',null)
				this.$router.push('/')
			}
		},
		created() {}

	}
</script>
<style>
	.layout-container-demo .el-header {
		position: relative;
		background-color: white;
	}

	.layout-container-demo .el-aside {
		color: var(--el-text-color-primary);
		background: var(--el-color-primary-light-8);
		height: 100%;
	}

	.layout-container-demo .el-menu {
		border-right: none;

	}

	.layout-container-demo .el-main {
		padding: 0;
	}

	.layout-container-demo .toolbar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		right: 20px;
	}

	.router-link-active {
		text-decoration: none;
		color: #000000;
	}

	a {
		text-decoration: none;
		color: #000000;
	}
</style>
